<template>
    <div>
        <!-- 查询部分 -->
        <div class="search" v-if="flag == true">
            <el-form ref="ruleFormRef" style="max-width: 1000px" :model="ruleForm" label-width="auto"
                class="demo-ruleForm" status-icon>
                <div>
                    <el-form-item label="客户姓名" prop="name">
                        <el-input v-model="ruleForm.name" placeholder='请输入课程名称' style="width: 218px;" />
                    </el-form-item>
                    <el-form-item label="课程类型" prop="type">
                        <el-select v-model="ruleForm.type" placeholder="请选择课程类型" style="width: 218px">
                            <el-option v-for="item in userlist" :key="item.dictCode" :label="item.dictLabel"
                                :value="item.dictValue">
                                <span style="float: left">{{ item.dictLabel }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="适用人群" prop="applyTo">
                        <el-select v-model="ruleForm.applyTo" placeholder="请选择适用人群" style="width: 218px">
                            <el-option v-for="item in courselist" :key="item.dictCode" :label="item.dictLabel"
                                :value="item.dictValue">
                                <span style="float: left">{{ item.dictLabel }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="最低价格" prop="minPrice">
                        <el-input-number v-model="ruleForm.minPrice" :step="100" :min="0" :max="100000"
                            placeholder="最低价格" />
                    </el-form-item>
                    <el-form-item label="最高价格" prop="maxPrice">
                        <el-input-number v-model="ruleForm.maxPrice" :step="100" :min="0" :max="100000"
                            placeholder="最高价格" />
                    </el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        搜索
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
            </el-form>
        </div>
        <!-- 下方几个小功能区 -->
        <div class="title">
            <div>
                <el-button type="primary" plain>新增</el-button>
                <el-button type="success" plain>修改</el-button>
                <el-button type="danger" plain>删除</el-button>
                <el-button type="warning" plain>导出</el-button>
            </div>
            <div class="look">
                <div>
                    <el-tooltip class="box-item" effect="dark" :content="flag == true ? '隐藏搜索' : '显示搜索'"
                        placement="top">
                        <el-icon @click="hidden">
                            <Search />
                        </el-icon>
                    </el-tooltip>
                </div>
                <div>
                    <el-tooltip class="box-item" effect="dark" content="刷新" placement="top">
                        <el-icon @click="reload">
                            <Refresh />
                        </el-icon>
                    </el-tooltip>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import PagiNation from '../../../components/Pagination/index.vue'
import { formatDate } from '../../../utils/index.js'
import { reactive, ref, toRaw, watchEffect } from 'vue'
import type { ComponentSize, FormInstance, FormRules, ElTable } from 'element-plus'
import { getcourseType, getcourseUser } from '../../../utils/api.js'

// 搜索部分隐藏与显示
const flag = ref(true)
const hidden = () => {
    flag.value = !flag.value
}
// 页面刷新
const reload = () => {
    window.location.reload();
}

interface RuleForm {
    pageNum: number
    pageSize: number
    applyTo: number | ''
    type: number | ''
    name: string
    minPrice: number | ''
    maxPrice: number | ''
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    pageNum: 1,
    pageSize: 10,
    applyTo: '',
    type: '',
    name: '',
    minPrice: '',
    maxPrice: ''
})

// 重置部分
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))

const searchlist = toRaw(ruleForm) as any


const submitForm = () => {
    console.log('搜索内容', searchlist)
}

// 请求selecte接口
const course = ref<any>([])
let courselist = ref([])

const getcourse = async () => {
    try {
        const r = await getcourseType()
        course.value = r.data
        courselist.value = Array.from(toRaw(course.value))
        // console.log('获取渠道', qdlist.value)
    } catch (error) {
        // console.error('获取渠道失败', error)
    }
}
const user = ref<any>([])
let userlist = ref([])

const getuser = async () => {
    try {
        const r = await getcourseUser()
        user.value = r.data
        userlist.value = Array.from(toRaw(user.value))
        // console.log('获取渠道', qdlist.value)
    } catch (error) {
        // console.error('获取渠道失败', error)
    }
}
getcourse()
getuser()
</script>

<style lang="scss" scoped>
.search {
    width: 100%;
    padding: 0px 20px;
    padding-top: 10px;
}

.demo-ruleForm {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.demo-ruleForm>div {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    /* align-items: center; */
}

.demo-ruleForm>div .el-button,
.demo-ruleForm>div .el-form-item {
    margin: 10px;
}

.title {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    /* background-color: aqua; */
}

.look {
    display: flex;
}

.look>div {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(206, 210, 209);
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
}

.title button {
    margin-right: 5px;
}
</style>